<!--
 * @Author: 码上talk|RC
 * @Date: 2020-09-29 16:03:57
 * @LastEditTime: 2021-01-22 11:08:39
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-merchant/src/pages/goods/add.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="goods-add">
        <div class="ga-step">
            <i-steps :current="step" style="width: 50%">
                <i-step title="进行中" content="基础信息"></i-step>
                <i-step title="待进行" content="商品规格"></i-step>
                <i-step title="待进行" content="商品促销"></i-step>
                <i-step title="待进行" content="添加成功"></i-step>
            </i-steps>
        </div>
        <div class="ga-form">
            <form-box ref="goodsAdd" :form="form">
                <div class="gf-common gf-base" v-if="step === 0">
                    <div class="gc-input">
                        <form-item label="分类：" :filed="form['category']">
                            <i-cascader
                                :data="goodsEnum.goodsCategory"
                                :load-data="loadGoodsCategoryData"
                                :value="defaultValue.category"
                                @on-change="categoryChange"
                            ></i-cascader>
                        </form-item>
                        <form-item label="品牌：" :filed="form['brand']">
                            <i-select v-model="form['brand']['value']">
                                <i-option
                                    :key="key"
                                    :value="item.value"
                                    v-for="(item, key) in goodsEnum.goodsBrand"
                                >{{item.label}}</i-option>
                            </i-select>
                        </form-item>
                        <form-item label="名称：" :filed="form['name']">
                            <i-input v-model="form['name']['value']"></i-input>
                        </form-item>
                        <form-item label="标题：">
                            <i-input placeholder="商品标题"></i-input>
                        </form-item>
                        <form-item label="描述：">
                            <i-input
                                type="textarea"
                                :autosize="{ minRows: 6, maxRows: 10 }"
                                placeholder="商品描述"
                            ></i-input>
                        </form-item>
                        <form-item label="市场价：" :filed="form['marketAmount']">
                            <i-input v-model="form['marketAmount']['value']" placeholder="市场价"></i-input>
                        </form-item>
                        <form-item label="售价：" :filed="form['amount']">
                            <i-input v-model="form['amount']['value']" placeholder="商品售价"></i-input>
                        </form-item>
                        <form-item label="封面：" :filed="form['cover']">
                            <img-video-uploader :max="1" @upload-success="coverChange"></img-video-uploader>
                        </form-item>
                        <form-item label="图文详情：">
                            <quill-editor
                                ref="goodsDetailEditor"
                                v-model="form.detail"
                                :options="editorOption"
                            ></quill-editor>
                        </form-item>
                    </div>
                    <div class="gc-submit">
                        <i-button type="primary" @click.native="doNextStep">下一步</i-button>
                    </div>
                </div>
                <div class="gf-common gf-spec" v-else-if="step === 1">
                    <div class="gc-input">
                        <form-item :filed="form['goodsItem']">
                            <i-table :columns="columns" :data="data">
                                <template slot-scope="{ index }" slot="spec">
                                    <div class="s-wrap">
                                        <div
                                            class="w-item"
                                            :key="key"
                                            v-for="(item, key) in goodsItemEnum.goodsAttr"
                                        >
                                            <span>{{item.label}}</span>
                                            <i-select
                                                size="small"
                                                style="width:100px"
                                                :transfer="true"
                                                @on-change="(val) => {goodsItemSpecChange(index, key, item, val)}"
                                            >
                                                <i-option
                                                    v-for="(item1, key1) in item.children"
                                                    :value="item1.value"
                                                    :key="key1"
                                                >{{ item1.label }}</i-option>
                                            </i-select>
                                        </div>
                                    </div>
                                </template>
                                <template slot-scope="{ index }" slot="cover">
                                    <img-video-uploader
                                        :value="defaultValue.goodsItemCover[index]"
                                        :max="1"
                                        @upload-success="(val) => {goodsItemCoverChange(index, val)}"
                                    ></img-video-uploader>
                                </template>
                                <template slot-scope="{ index }" slot="amount">
                                    <i-input
                                        placeholder="售价"
                                        v-model="form['goodsItem']['value'][index]['amount']['value']"
                                    ></i-input>
                                </template>
                                <template slot-scope="{ index }" slot="stock">
                                    <i-input
                                        placeholder="库存"
                                        v-model="form['goodsItem']['value'][index]['stock']['value']"
                                    ></i-input>
                                </template>
                                <template slot-scope="{ index }" slot="action">
                                    <i-button size="small" @click="deleteGoodsItem(index)">删除</i-button>
                                </template>
                            </i-table>
                        </form-item>
                    </div>
                    <div class="gc-add" @click="addGodsItemForm">
                        <div class="ga-btn">
                            <span>新增</span>
                        </div>
                    </div>
                    <div class="gc-submit">
                        <i-button @click.native="step = step - 1">上一步</i-button>
                        <i-button
                            type="primary"
                            style="margin-left: 8px"
                            @click.native="doNextStep"
                        >下一步</i-button>
                    </div>
                </div>
                <div class="gf-common gf-promote" v-else-if="step === 2">
                    <div class="gc-input">
                        <form-item label="赠送积分：">
                            <i-input v-model="form.gift" placeholder="积分"></i-input>
                        </form-item>
                        <form-item label="推荐：">
                            <i-checkbox-group @on-change="recommondChange">
                                <i-checkbox label="新品"></i-checkbox>
                                <i-checkbox label="推荐"></i-checkbox>
                                <i-checkbox label="热卖"></i-checkbox>
                            </i-checkbox-group>
                        </form-item>
                        <form-item label="关联词：">
                            <i-input v-model="form.keywords" placeholder="多个用;分割"></i-input>
                        </form-item>
                    </div>
                    <div class="gc-submit">
                        <i-button @click.native="step = step - 1">上一步</i-button>
                        <i-button
                            type="primary"
                            style="margin-left: 8px"
                            @click.native="doNextStep"
                        >添加商品</i-button>
                    </div>
                </div>
                <div class="gf-common gf-success" v-else-if="step === 3">
                    <div class="gs-icon">
                        <i class="iconfont icon-chenggong"></i>
                    </div>
                    <div class="gs-text">
                        <span>添加商品成功</span>
                    </div>
                    <div class="gs-description">
                        <p>
                            提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用
                            Message
                            全局提示反馈即可。灰色区域可以显示一些补充的信息。
                        </p>
                    </div>
                    <div class="gs-link">
                        <i-button
                            type="primary"
                            style="margin-left: 8px"
                            @click.native="go(`/goods/info?id=${goods.id}`)"
                        >查看商品</i-button>
                        <i-button style="margin-left: 8px">返回列表</i-button>
                    </div>
                </div>
            </form-box>
        </div>
        <div class="ga-notice">
            <div class="gn-common gn-base" v-if="step === 0">
                <div class="gc-title">
                    <span>说明</span>
                </div>
                <div class="gc-content">
                    <div class="gc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明</p>
                        </div>
                    </div>
                    <div class="gc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

/*eslint-disable */
import api from '@/api'
import { Goods } from '@/model/goods'
import { GoodsItem } from '@/model/goods/item'
import { quillEditor } from 'vue-quill-editor'
import { formBox, formItem } from '@/components/form'
import imgVideoUploader from '@/components/img-video-uploader'
import { Oss } from '@/model/oss'
export default {
    components: {
        formBox,
        formItem,
        quillEditor,
        imgVideoUploader
    },
    data() {
        return {
            step: 0,
            defaultValue: {
                category: [],
                cover: [],
                goodsItemSpec: [],
                goodsItemCover: []
            },
            goodsEnum: Goods.ENUM.init(),
            goodsItemEnum: GoodsItem.ENUM.init(),
            form: Goods.FORM.init('add'),
            columns: [
                {
                    title: '规格',
                    slot: 'spec',
                    width: 200
                },
                {
                    title: '封面',
                    slot: 'cover'
                },
                {
                    title: '价格',
                    slot: 'amount'
                },
                {
                    title: '库存',
                    slot: 'stock'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            data: [],
            editorOption: {
                placeholder: '编辑文章内容'
            },
            content: '',
            goods: new Goods()
        }
    },
    watch: {
        'form.goodsItem.value': function (val) {
            this.data = []
            for (let i = 0; i < val.length; i++) {
                this.data.push({})
            }
        }
    },
    methods: {
        async init() {
            this.goodsEnum = await Goods.ENUM.load()
        },
        loadGoodsCategoryData(item, callback) {
            item.loading = true
            Goods.ENUM.lazyLoad('goodsCategory', {
                query: {
                    pId: item.value
                }
            }, { item, callback })
        },
        categoryChange(val) {
            if (!val.length) {
                return null
            }
            this.defaultValue['category'] = val
            this.form['category']['value'] = val.join('>')
        },
        coverChange(e) {
            this.defaultValue['cover'] = e
            this.form['cover']['value'] = e.length ? e[0]['filename'] : ''
        },
        onEditorChange({ html }) {
            this.content = html;
        },
        recommondChange(val) {
            this.form['recommond']['value'] = val
        },
        addGodsItemForm() {
            this.$set(this.defaultValue['goodsItemCover'], this.form['goodsItem']['value'].length, [new Oss({ filename: this.form['cover']['value'] })])
            let newGoodsItem = GoodsItem.FORM.init('add')
            newGoodsItem['amount']['value'] = this.form['amount']['value']
            newGoodsItem['cover']['value'] = this.form['cover']['value']
            this.form['goodsItem']['value'].push(newGoodsItem)
        },
        deleteGoodsItem(index) {
            this.form['goodsItem']['value'].splice(index, 1)
        },
        goodsItemSpecChange(index, key, item, val) {
            const attr = {
                key: item['label'],
                value: item['children'].filter(i => i['value'] === val)[0]['label'],
                value_id: val
            }
            let spec = this.defaultValue['goodsItemSpec'][index]
            if (spec) {
                let isExist = false
                for (let i = 0; i < spec.length; i++) {
                    if (spec[i]['key'] === item['label']) {
                        isExist = true
                        spec[i] = attr
                        break
                    }
                }
                if (!isExist) {
                    spec.push(attr)
                }
            } else {
                this.defaultValue['goodsItemSpec'][index] = [attr]
            }
            this.form['goodsItem']['value'][index]['name']['value'] = `${this.form['name']['value']} ${this.defaultValue['goodsItemSpec'][index].map(i => i['value']).join('+')}`
            this.form['goodsItem']['value'][index]['attrJson']['value'] = JSON.stringify(this.defaultValue['goodsItemSpec'][index])
        },
        goodsItemCoverChange(index, val) {
            this.$set(this.defaultValue['goodsItemCover'], index, val)
            this.form['goodsItem']['value'][index]['cover']['value'] = val.length ? val[0]['filename'] : ''
        },
        doNextStep() {
            const rule = [
                null,
                null,
                []
            ]
            this.$refs['goodsAdd'].validate(rule[this.step]).then(result => {
                if (this.step < 2) {
                    if (this.step === 0) {
                        GoodsItem.ENUM.load({ goodsCategoryId: this.defaultValue['category'].join(',') }).then(res => {
                            this.goodsItemEnum = res
                        })
                    }
                    this.step++
                    return
                }
                this.addGoods(result)
            }).catch((e) => {
                this.$Message.warning('请确认填写信息')
            })
        },
        addGoods(result) {
            Goods.API('add', { params: {}, data: result['form'] }).then(res => {
                const { data } = res
                this.step++
                this.goods = new Goods(data)
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<style lang="less">
.goods-add {
    padding: 10px;
    background: white;
    .ga-step {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }
    .ga-form {
        display: flex;
        justify-content: center;
        padding: 20px 0 40px 0;
        .gf-common {
            width: 600px;
            .gc-submit {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
            }
        }
        .gf-base {
            .ql-container {
                height: 500px;
            }
        }
        .gf-spec {
            width: 900px;
            .gc-input {
                .s-wrap {
                    .w-item {
                        display: flex;
                        align-items: center;
                        span {
                            padding-right: 5px;
                        }
                        &:not(:first-child) {
                            margin-top: 10px;
                        }
                    }
                }
            }
            .gc-add {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                margin-top: 20px;
                border: 1px dashed #e9e9e9;
            }
        }
        .gf-success {
            display: flex;
            flex-direction: column;
            align-items: center;
            .gs-icon {
                i {
                    font-size: 100px;
                    color: #19be6b;
                }
            }
            .gs-text {
                font-size: 18px;
                color: #000;
            }
            .gs-description {
                padding: 20px 0;
            }
        }
    }
    .ga-notice {
        .gn-common {
            padding: 10px;
            border: 1px solid #abdcff;
            background: #f0faff;
            .gc-title {
                display: flex;
                align-items: center;
                height: 40px;
                span {
                    font-size: 18px;
                }
            }
            .gc-content {
                .gc-item {
                    .gi-label {
                        height: 30px;
                        span {
                            font-size: 16px;
                        }
                    }
                    &:not(:first-child) {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}
</style>